---
import { OrganizationProfile as OrganizationProfileAstro, OrganizationSwitcher } from '@clerk/astro/components';
import Layout from '../../layouts/Layout.astro';

// Added a dedicatedPage query param to conditionally render the OrganizationProfile
// as for some reason, the menu items in the OrganizationSwitcher
// goes out of bounds in test environment.
const dedicatedPage = Astro.url.searchParams.get('dedicatedPage') === 'true';
---

<Layout title='Custom Pages'>
  <div class='w-full flex justify-center'>
    <OrganizationSwitcher>
      {
        !dedicatedPage && (
          <Fragment>
            <OrganizationSwitcher.OrganizationProfilePage
              label='Terms'
              url='terms'
            >
              <div slot='label-icon'>Icon</div>
              <div>
                <h1>Custom Terms Page</h1>
                <p>This is the custom terms page</p>
              </div>
            </OrganizationSwitcher.OrganizationProfilePage>
            <OrganizationSwitcher.OrganizationProfileLink
              label='Homepage'
              url='/'
            >
              <div slot='label-icon'>Icon</div>
            </OrganizationSwitcher.OrganizationProfileLink>
            <OrganizationSwitcher.OrganizationProfilePage label='members' />
          </Fragment>
        )
      }
    </OrganizationSwitcher>
    {
      dedicatedPage && (
        <OrganizationProfileAstro path='/custom-pages/organization-profile'>
          <OrganizationProfileAstro.Page
            label='Terms'
            url='terms'
          >
            <div slot='label-icon'>Icon</div>
            <div>
              <h1>Custom Terms Page</h1>
              <p>This is the custom terms page</p>
            </div>
          </OrganizationProfileAstro.Page>
          <OrganizationProfileAstro.Link
            label='Homepage'
            url='/'
          >
            <div slot='label-icon'>Icon</div>
          </OrganizationProfileAstro.Link>
          <OrganizationProfileAstro.Page label='general' />
        </OrganizationProfileAstro>
      )
    }
  </div>
</Layout>
